<template>
  <div id="app">
    <el-container>
      <el-header style="height: 120px">
        <img src="./assets/logo.png" class="logo" />
        <!-- 主菜单：通过 :default-active 绑定当前路由路径 -->
        <el-menu
          class="el-menu-demo"
          mode="horizontal"
          :default-active="activeIndex"
        >
          <el-menu-item index="/">
            <!-- index 与路由路径完全一致 -->
            <router-link to="/">首页</router-link>
          </el-menu-item>
          <el-menu-item index="/login" v-if="!isLogin">
            <router-link to="/login">登录</router-link>
          </el-menu-item>
          <el-menu-item index="/register" v-if="!isLogin">
            <router-link to="/register">注册</router-link>
          </el-menu-item>
        </el-menu>

        <!-- 用户菜单（登录后显示） -->
        <el-menu
          class="el-menu-user"
          mode="horizontal"
          :default-active="activeIndex"
          v-if="isLogin"
        >
          <el-submenu index="/my">
            <template #title>
              <el-avatar
                :src="userInfo.avatar"
                size="small"
                class="el-avatar-user"
              />
              {{ userInfo.username }}
            </template>
            <!-- 子菜单项 index 需与路由路径完全一致 -->
            <el-menu-item index="/my/home">
              <router-link to="/my/home" tag="span" class="menu-link"
                >我的主页</router-link
              >
            </el-menu-item>
            <el-menu-item index="/my/article">
              <router-link to="/my/article" tag="span" class="menu-link"
                >我的文章</router-link
              >
            </el-menu-item>
            <el-menu-item index="/my/setting">
              <router-link to="/my/setting" tag="span" class="menu-link"
                >设置</router-link
              >
            </el-menu-item>
            <el-menu-item index="/my/logout">
              <el-link
                @click="logout()"
                style="display: block; text-align: center"
                >退出</el-link
              >
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-header>
      <el-main>
        <router-view />
      </el-main>
      <el-footer>
        <div class="footer-content">
          <!-- 左侧图标与版权信息 -->
          <div class="footer-left">
            <p class="footer-copyright">
              © <span class="year">{{ new Date().getFullYear() }}</span> My Blog
              · 版权所有
            </p>
          </div>

          <!-- 中间导航与联系方式 -->
          <div class="footer-middle">
            <p class="footer-contact">
              <el-icon class="icon-mail"><Mail /></el-icon>
              联系邮箱：<a href="mailto:contact@myblog.com"
                >2740307951@qq.com</a
              >
            </p>
          </div>

          <!-- 右侧备案与社交链接（关键修改：p→div） -->
          <div class="footer-right">
            <div class="footer-info">
              <!-- 改为 div 替代 p -->
              <span>备案号：XXICP备2024000001号</span>
              <div class="social-links">
                <i class="icon-wechat"></i>
                <i class="icon-qq"></i>
                <i class="icon-weibo"></i>
              </div>
            </div>
          </div>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
import { postVerify } from "./api";
const debounce = (fn, delay) => {
  let timer;
  return (...args) => {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
  constructor(callback) {
    callback = debounce(callback, 200);
    super(callback);
  }
};
export default {
  data() {
    return {
      // 初始化 activeIndex 为当前路由路径
      activeIndex: this.$route.path,
    };
  },
  // 监听路由变化，更新 activeIndex
  watch: {
    $route(to) {
      this.activeIndex = to.path;
    },
  },
  async beforeMount() {
    if (localStorage.getItem("token")) {
      const token = localStorage.getItem("token").split(" ")[1];
      const res = await postVerify({ token: token });
      if (res.data.status !== 0) {
        this.$store.dispatch("logout");
        localStorage.removeItem("token");
        this.$message.error("登录状态已过期，请重新登录");
      }
    }
    if (this.isLogin) {
      this.userInfo = this.$store.state.user;
    }
  },
  methods: {
    logout() {
      if (!confirm("确定要退出登录吗？")) {
        return;
      }
      this.$store.dispatch("logout");
      localStorage.removeItem("token");
      this.$router.push("/");
    },
  },
  computed: {
    // 计算属性，根据 isLogin 动态返回菜单
    isLogin() {
      return this.$store.state.isLogin;
    },
    userInfo: {
      get() {
        return this.$store.state.user;
      },
      set(value) {
        this.$store.commit("setUser", value);
      },
    },
  },
};
</script>

<style>
#app {
  width: 100%;
}
.el-container {
  width: 800px;
  height: 100%;
  margin: 0 auto;
}
.el-header {
  display: flex;
}
.el-header .el-menu-demo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-menu.el-menu--horizontal {
  border-bottom: none !important;
}
.el-header .el-menu-demo .el-menu-item {
  padding: 0;
  height: 120px;
  line-height: 120px;
  width: 50px;
}
.el-header .el-menu-demo a {
  display: block;
  width: 100%;
  height: 100%;
  text-align: center;
  text-decoration: none;
}
.el-header .el-menu-user {
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu-link {
  display: block; /* 转换为块级元素 */
  width: 100%; /* 宽度占满父级 el-menu-item */
  height: 100%; /* 高度占满父级 el-menu-item */
  text-align: center; /* 文本居中 */
  line-height: inherit; /* 继承行高（与 el-menu-item 一致） */
  text-decoration: none; /* 去除下划线 */
}
.el-footer {
  text-align: center;
  background-color: #f8f9fa; /* 浅灰色背景 */
  padding: 2rem 1rem; /* 增加上下左右内边距 */
  border-top: 1px solid #e9ecef; /* 顶部边框 */
  font-size: 0.9rem; /* 统一字体大小 */
  color: #6c757d; /* 深灰色文字 */
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px; /* 适配更大屏幕 */
  margin: 0 auto; /* 水平居中 */
}

/* 左侧版权区域 */
.footer-left {
  display: flex;
  align-items: center;
}
.footer-logo {
  width: 40px;
  height: 40px;
  margin-right: 0.5rem;
  vertical-align: middle; /* 图标与文字垂直居中 */
}
.footer-copyright {
  margin: 0;
}
.year {
  color: #2c3e50; /* 深蓝色年份 */
  font-weight: 500;
}

/* 中间导航区域 */
.footer-middle {
  text-align: center;
}
.footer-links {
  margin-bottom: 0.5rem;
}
.footer-links .el-link {
  margin: 0 0.5rem;
  color: #3498db; /* 蓝色链接 */
  text-decoration: none;
  transition: color 0.3s; /* 鼠标悬停动画 */
}
.footer-links .el-link:hover {
  color: #2980b9;
}
.footer-contact {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-mail {
  font-size: 1.1rem;
  margin-right: 0.3rem;
  color: #3498db;
}

/* 右侧备案与社交区域 */
.footer-right {
  display: flex;
  align-items: center;
}
.social-links {
  margin-left: 1rem;
}
.social-links .el-icon {
  font-size: 1.4rem;
  margin-left: 0.5rem;
  color: #555;
  cursor: pointer;
  transition: color 0.3s;
}
.social-links .el-icon:hover {
  color: #3498db;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .footer-content {
    flex-direction: column;
    text-align: center;
  }
  .footer-left,
  .footer-middle,
  .footer-right {
    margin: 0.5rem 0;
  }
  .social-links {
    margin-left: 0;
    margin-top: 0.5rem;
  }
}
</style>
